import React, { useState } from 'react'
import { useExplainCode } from '@/hooks/useExplainCode'

export default function TranslucentBorders() {
  const [isChecked, setChecked] = useState<boolean>(true)
  const handleCheck = () => {
    setChecked(!isChecked)
  }

  const oCode = useExplainCode();
  return (
    <div>
      <section ref={oCode}>
        <h3 className="font-semibold text-xl mb-1 ">半透明边框</h3>
        <p className="mt-4 mb-4 p-4 rounded-md bg-yellow-50">
          默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，
          在css3中，我们可以通过设置`background-clip: padding-box;`来改变背景的默认行为，
          达到我们想要的效果。
        </p>
      </section>
      <main className="border">
        <input id="pb" type="checkbox" checked={isChecked} onChange={handleCheck} />
        <label htmlFor="pb">padding-box(default)</label>
        <div className="clip">A paragraph of filler text. La la la de dah de dah de dah de la.</div>
      </main>
      <style jsx>{`
        main{
          width: 100%;
          padding: 60px 80px 80px;
          background: #b4a078;
        }
        .clip{
          padding: 12px;
          margin: 20px auto;
          background: white;
          border: 10px solid hsla(0, 0%, 100%, .5);
        }
        label{
          color: #f4f0ea;
        }
        input[id="pb"]:checked ~ div{
          background-clip: padding-box;
        }
      `}</style>
    </div>
  )
}
